<template>
  <div class="the-header">
    <div class="towThing" @click="goHome">
      <div class="header-logo">
      </div>
      <!-- <div class="header-text">HMusic</div> -->
    </div>
    <ul class="navbar">
      <li :class="{active: item.name == activeName}" v-for="item in navMsg" :key="item.path"
        @click="goPage(item.path,item.name)">
        {{item.name}}
      </li>
      <li>
        <div class="header-search">
          <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
          <div class="search-btn" @click="goSearch()">
            <svg class="icon">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
          </div>
        </div>
      </li>
      <li v-show="!loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path"
        @click="goPage(item.path,item.name)">
        {{item.name}}
      </li>
    </ul>
    <div class="header-right" v-show="loginIn">
      <div id='user'>
        <img :src='attachImageUrl(avator)'>

      </div>
      <div class="dropdown">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{this.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="pensonal">个人设置</el-dropdown-item>
            <el-dropdown-item command="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    navMsg,
    loginMsg,
    menuList,

  } from '../assets/data/header';
  import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      return {
        navMsg: [], //左侧导航栏
        keywords: '', //搜索关键字
        loginMsg: [], //右侧导航栏
        menuList: [], //用户下拉菜单
      }

    },
    computed: {
      ...mapGetters([
        'activeName',
        'loginIn',
        'avator',
        'username',
      ]),
    },
    created() {
      this.navMsg = navMsg;
      this.loginMsg = loginMsg;
      this.menuList = menuList;
    },
    mounted() {

    },

    methods: {
      goHome() {
        this.$store.commit('setActiveName', '首页');
        this.$router.push({
          path: "/home"
        });
      },
      goSearch(keywords) {
        keywords = this.keywords;
        this.$store.commit('setActiveName', '');
        this.$router.push({
          path: "/searchSongs",
          query: {
            song: keywords
          }
        });
      },
      goPage(path, name) {
        this.$store.commit('setActiveName', name);
        this.$router.push({
          path: path
        });
      },
      //获取图片地址
      attachImageUrl(srcUrl) {
        return this.$store.state.configure.HOST + srcUrl;
      },
      handleCommand(command) {
        if (command === "logout") {
          this.$notify({
            title: '注销成功',
            type: 'success'
          });
          this.$store.commit('setLoginIn', false);
        }
        if (command === "pensonal") {
          console.log(command)
        }
      },
      goMenuList(path) {
        if (path == 0) {
          this.$store.commit('setLoginIn', false);
          location.href = '/home'
        } else {
          this.$router.push({
            path: path
          });
        }
      }
    }
  }
</script>

<style scoped>
  .the-header {
    position: fixed;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 70px;
    line-height: 50px;
    padding: 0 80px;
    margin: 0;
    background-color: #fefefe;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    ;
    box-sizing: border-box;
    z-index: 100;
  }

  .towThing {
    cursor: pointer;
  }

  .header-logo {
    float: left;
    width: 61px;
    height: 61px;
    margin-top: 8px;
    background-image: url("../assets/musicLogo.jpeg");
    background-size: cover;
  }

  .header-text {
    margin-left: 10px;
    float: left;
    display: flex;
    margin-top: 12px;
    font-size: 35px;
    font-weight: bolder;
  }

  .tableBox {
    float: left;
    margin-left: 50px;
    width: 250px;
    height: 70px;
  }

  .searchBox {
    float: left;
    margin-top: 15px;
  }

  .avatorBox {
    margin-right: 50px;
    margin-top: 9px;
    float: right;
  }

  .dropBox {
    float: right;
    margin: 10px;
  }

  .navbar {
    height: 70px;
    white-space: nowrap;

  }

  .navbar li {
    margin: 0 10px;
    padding: 0 10px;
    font-size: 18px;
    color: #67757f;
    text-align: center;
    border-bottom: none;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
  }


  .header-search {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 5px;
    overflow: hidden;

  }


  .header-search input {
    height: 35px;
    width: 270px;
    font-size: 14px;
    border: 0;
    text-indent: 10px;
    background-color: #ebeef0;

  }

  input:focus {
    outline: none;
  }

  .header-search .search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    background-color: #30a4fc;
    width: 60px;
    height: 37px;
    cursor: pointer;

  }


  .search-btn .icon {
    width: 2.5em;
    height: 1.6em;
    font-size: 1.2em;
    color: white;
    fill: currentColor;
    overflow: hidden;
    position: relative;
  }

  /*用户*/
  .header-right {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

  }

  .header-right #user {
    float: left;
    overflow: hidden;
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 400px;

  }

  .header-right #user img {
    width: 100%;
  }

  .dropdown {
    float: left;
    margin: 10px 0;
  }

  .active {
    color: #30a4fc !important;
    border-bottom: 5px solid #30a4fc !important;
  }
</style>
